<script setup>
import {Delete, Edit, Plus} from '@element-plus/icons-vue'
import {ref} from 'vue'
import {departmentPageService, addDepartmentService, deleteDepartmentService,updateDepartmentService} from "@/api/department";


import {ElMessage, ElMessageBox} from "element-plus";

//用户搜索时的部门名称
const name = ref('')
//部门数据模型
const departments = ref([])
//添加部门数据模型
const departmentData = ref({
  departmentName: '',
  departmentDescription: ''
})
//控制抽屉是否显示
const dialogVisible = ref(false)
//控制编辑框标题，为添加部门or修改部门
const title = ref('')
//分页条数据模型
const page = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

 //当每页条数发生了变化，调用此函数
 const onSizeChange = (size) => {
  pageSize.value = size
  departmentList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  page.value = num
  departmentList()
}
 //定义注册表单校验规则
 const rules ={
  departmentName:[
    {required:true, message:"请输入部门名称", trigger:"blur"},
  ]
}
//清空模型数据
const clearData = () => {
  departmentData.value.departmentName = '';
  departmentData.value.departmentDescription = '';
}
//展示编辑弹窗
const showEditDialog = (row,Texttitle)=>{
  dialogVisible.value = true
  title.value = Texttitle
  departmentData.value.departmentName = row.departmentName
  departmentData.value.departmentDescription = row.departmentDescription
  departmentData.value.id = row.id
}
//获取分页部门列表
const departmentList = async () => {
  const params = {
    page: page.value,
    pageSize: pageSize.value,
    name: name.value? name.value : null,
  }
  const result = await departmentPageService(params);
  //渲染视图
  total.value = result.data.total
  departments.value = result.data.records
  console.log(result);
}
departmentList()

//添加部门
const addDepartment = async () => {
  const result = await addDepartmentService(departmentData.value);
  console.log(departmentData.value);
  
  ElMessage({
      showClose: true,
      message: result.msg ? result.msg : "添加成功",
      type: 'success',
    })
  dialogVisible.value = false
  departmentList()
}
// //删除部门
// const deleteDepartment = async (row) => {
//       const result = await deleteDepartmentService(row.id)
//       ElMessage({
//       showClose: true,
//       message: result.msg ? result.msg : "删除成功",
//       type: 'success',
//     })
//     departmentList()
//   }
//更新部门
const updateDepartment = async (row) => {
  const result = await updateDepartmentService(departmentData.value);
  ElMessage({
      showClose: true,
      message: result.msg ? result.msg : "更新成功",
      type: 'success',
    })
  departmentList()
  dialogVisible.value = false
}

const deleteDepartment = (row) => {
  ElMessageBox.confirm(
      '你确认要删除该部门信息吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(
    async () => {
      const result = await deleteDepartmentService(row.id)
      ElMessage({
      showClose: true,
      message: result.msg ? result.msg : "删除成功",
      type: 'success',
    })
    departmentList()
  }
  )
}

</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>部门管理</span>
        <div class="extra">
          <el-button type="primary" @click="dialogVisible=true;title='添加部门';clearData()">添加部门</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="部门名称" style="width: 180px;">
    <el-input v-model.number="name"></el-input>
  </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="departmentList">搜索</el-button>
        <el-button @click="name=''">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 部門列表 -->
    <el-table :data="departments" style="width: 100%">
      <el-table-column label="部门名称" width="190" prop="departmentName"></el-table-column>
      <el-table-column label="部门描述" prop="departmentDescription"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="创建人" prop="createUser"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑部门')"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="deleteDepartment(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>


  <!-- 抽屉 -->
  <el-drawer v-model="dialogVisible" :title="title" direction="rtl" size="50%">
    <!-- 添加部門表单 -->
    <el-form :model="departmentData" label-width="100px" :rules="rules">
      <el-form-item label="部门名称" prop="departmentName">
        <el-input v-model="departmentData.departmentName" placeholder="请输入部门名称"></el-input>
      </el-form-item>
      <el-form-item label="部门描述">
        <el-input v-model="departmentData.departmentDescription" placeholder="请输入部门描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="title=='添加部门'?addDepartment() : updateDepartment()">保存
        </el-button>
        <el-button type="info" @click="dialogVisible = false">取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}


/* 抽屉样式 */
.avatar-uploader {
  :deep {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>